<template>
    <div class="home">
        <header>
            <div class="site" v-if="scrollTop < 200">
                <img src="../../assets/receiver-address-icon.png" alt="地址">
                <p v-if="token">玛琪雅朵漫妙屋超市</p>
                <p v-if="!token">北京</p>
                <i v-if="!token"></i>
            </div>
            <div class="label" v-if="scrollTop < 200">我要卖货</div>
            <div class="input" v-bind="{style: scrollTop > 200 ? 'top: .07rem;' : ''}">
                <img src="../../assets/search-icon.png" alt="搜索">
                <input type="text" placeholder="搜索商品" @click="back">
            </div>
        </header>
        <div class="swiper-container slideshow">
            <div class="swiper-wrapper atlas">
                <div class="swiper-slide map" v-for="(item,i) in 5" :key="i">
                    <img src="../../assets/Bitmap.png" alt="轮播图">
                </div>
            </div>
        </div>
        <nav class="navber">
            <div class="con" v-for="(item,index) in navList" :key="index">
                <div class="image">
                    <img :src="item.imgurl" alt="">
                </div>
                <p>{{item.title}}</p>
            </div>
        </nav>
        <div class="swiper-container advertising">
            <img src="../../assets/search-icon.png" alt="喇叭">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,i) in 5" :key="i">新增《营销工具“拼团”玩法使用说明》内容详情向蜂网头条</div>
            </div>
        </div>
        <section class="box" v-for="(item,i) in List" :key="i">
            <p class="head">
                <img src="../../assets/red-left-icon.png" alt="左">
                {{List[i].name}}
                <img src="../../assets/red-right-icon.png" alt="右">
            </p>
            <div class="x-list">
                <div class="slideshow" v-if="List[i].b2bFloorBannerList.length > 0">
                    <div class="img" v-for="(item,index) in List[i].b2bFloorBannerList" :key="index">
                        <img :src="item.picUrl" alt="展示">
                    </div>
                    <div class="swiper-container x-list-slideshow" v-if="List[i].b2bFloorBannerList.length > 1">
                        <div class="swiper-wrapper img">
                            <div class="swiper-slide img" v-for="(item,index) in List[i].b2bFloorBannerList" :key="index">
                                <img :src="item.picUrl" alt="轮播图">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="logos" v-if="List[i].brandsListRecommendLocationsList.length > 0">
                    <div class="goodLogo" v-for="(item,index) in List[i].brandsListRecommendLocationsList" :key="index">
                        <img :src="item.logoUrl" alt="logo">
                        {{item.name}}
                    </div>
                </div>
                <ul>
                    <li class="content" v-for="(item,index) in List[i].goodsListRecommendLocationsList" :key="index">
                        <div class="image">
                            <img :src="item.picsUrl" alt="">
                        </div>
                        <div class="describe">
                            <p>{{item.goodsName}}</p>
                            <span>{{item.dealerName}}</span>
                        </div>
                        <div class="price">
                            <p class="num">¥ <span v-if="token == '' ">?</span><span v-else-if="token != '' ">{{item.orderPrice | numFilter}}</span></p>
                            <img src="../../assets/to_shop.png" alt="">
                        </div>
                        <div class="corner_mark" v-if="item.promotionConponImgTag">
                            {{item.promotionConponImgTag}}
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <img class="backTop" v-bind="{style: scrollTop > 200 ? 'display: block' : ''}" src="../../assets/back-top.png" @click="backTop" alt="返回顶部">
    </div>
</template>

<script>
import Swiper from 'swiper'; 
import 'swiper/dist/css/swiper.min.css';
import api from '../../utils/api';
import store from '../../store';
import qs from 'qs';
export default {
    name: "home",
    data(){
        return {
            title: "首页",
            token: store.state.token,
            navList:[
                {
                    imgurl: require("../../assets/detailed-list.png"),
                    title: "常购清单"
                },
                {
                    imgurl: require("../../assets/security.png"),
                    title: "领券中心"
                },
                {
                    imgurl: require("../../assets/order-form.png"),
                    title: "我的订单"
                },
                {
                    imgurl: require("../../assets/supplier.png"),
                    title: "我的供货商"
                }
            ],
            List:[],
            scrollTop: "",
        }
    },
    methods:{
        back(){
        this.$router.push({path:'/search'});
        },
        scrollToTop() { 
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            this.scrollTop = scrollTop;
        },
        backTop(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        },
    },
    mounted(){
        window.addEventListener('scroll', this.scrollToTop);
        let X_one_Swiper = new Swiper('.slideshow', {
            loop:true,
            autoplay: {
                delay: 2000,
                disableOnInteraction: false,
            },
        })
        let Y_Swiper = new Swiper('.advertising', {
			direction:'vertical',
            loop:true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
        })
        var that = this;
        var loginInfo = that.$store.state.loginInfo
        var data = {}
        if(typeof loginInfo == "string"){
            loginInfo = JSON.parse(that.$store.state.loginInfo);
            data = {
                "merchantId": loginInfo.merchantId,
                "siteid": loginInfo.stationId,
                "storeCustId": loginInfo.storeCustId,
                "terminal": 3,
                "storeId": loginInfo.storeId
            }
        }else if(typeof loginInfo == "object" && that.$store.state.token){
            loginInfo = that.$store.state.loginInfo;
            data = {
                "merchantId": loginInfo.merchantId,
                "siteid": loginInfo.stationId,
                "storeCustId": loginInfo.storeCustId,
                "terminal": 3,
                "storeId": loginInfo.storeId
            }
        }else{
            data = {
                "merchantId":0,
                "siteid":22,
                "storeCustId":0,
                "terminal":3,
                "storeId":0
            }
        }
        if(that.$store.state.token == localStorage.getItem("token")){
            api.post("/getListB2bIndex",data,"post")
            .then(res=>{
                if(res.data.status.statusCode === 0){
                    that.List = res.data.result.b2bFloorVoList
                }else{
                    console.log(res)
                }
            })
        }else{
            api.post("/getListB2bIndex",data,"post")
            .then(res=>{
                if(res.data.status.statusCode === 0){
                    that.List = res.data.result.b2bFloorVoList
                }else{
                    console.log(res)
                }
            })
        }
    },
    destroyed () {
        window.removeEventListener('scroll', this.scrollToTop); 
    }
}
</script>

<style lang="scss" scoped>
.home{
    background-color: #F8F8F8;
    margin: 0 auto;
    padding-top: .45rem;
    padding-bottom: .7rem;
    header{
        width: 92.5%;
        height: .16rem;
        background-color: #D33;
        color: #fff;
        padding: .15rem .14rem .14rem;
        margin: 0 auto;
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 20;
        display: flex;
        justify-content: space-between;
        position: relative;
        .site{
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all .2s ease-in-out;
            >img{
                width: .13rem;
                height: .13rem;
            }
            p{
                font-size: .16rem;
                line-height: .16rem;
                padding: 0 .05rem 0 .05rem;
            }
            >i{
                width: 0;
                height: 0;
                border: .03rem solid transparent;
                border-top: .03rem solid #fff;
            }
        }
        .label{
            width: .75rem;
            height: .22rem;
            font-size: .14rem;
            line-height: .24rem;
            margin-top: -0.04rem;
            border: .01rem solid #fff;
            border-radius: 1rem;
            transition: all .2s ease-in-out;
        }
        .input{
            width: 3.47rem;
            height: .14rem;
            line-height: .14rem;
            padding: .09rem 0;
            opacity: 0.9;
            background: #FFFFFF;
            border-radius: 37px;
            position: absolute;
            top: .56rem;
            left: .14rem;
            z-index: 9;
            transition: all .2s ease-in-out;
            >img{
                width: .13rem;
                height: .13rem;
                margin-left: .1rem;
                float: left;
            }
            input{
                width: 70%;
                line-height: .14rem;
                padding: 0;
                margin-left: .09rem;
                float: left;
                border: none;
                outline: none;
            }
        }
    }
    .slideshow>.atlas>.map>img{
        width: 3.75rem;
        height: 2.1rem;
    }
    .navber{
        width: 3.15rem;
        height: .61rem;
        // padding: .2rem .22rem .2rem .16rem;
        padding: .2rem;
        margin: 0 auto;
        background: rgba(255,255,255,0.95);
        box-shadow: 0 .02rem .04rem 0 rgba(0,0,0,0.08);
        border-radius: .04rem;
        position: relative;
        top: -0.37rem;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        .con{
            .image{
                width: .4rem;
                height: .4rem;
                margin: 0 auto 10px;
                >img{
                    width: .4rem;
                    height: .4rem;
                }
            }
            p{
                font-size: 12px;
                color: #333333;
                line-height: 12px;
                text-align: center;
            }
        }
    }
    .advertising{
        width: 3.75rem;
        height: .4rem;
        line-height: .4rem;
        background-color: #fff;
        font-size: .12rem;
        color: #333333;
        margin: 0 auto;
        margin-top: -0.3rem;
        >img{
            width: .12rem;
            height: .1rem;
            vertical-align: middle;
            margin: .15rem .09rem .15rem .14rem;
            float: left;
        }
        >span{
            float: left;
        }
    }
    .box{
        width: 100%;
        margin: 0 auto;
        .head{
            width: 3.75rem;
            height: .16rem;
            padding: .12rem 0;
            margin: 0 auto;
            font-family: PingFangSC-Semibold;
            font-size: .14rem;
            color: #FD6F17;
            letter-spacing: -0.24px;
            img{
                width: .27rem;
                height: .16rem;
                vertical-align: middle;
            }
        }
        .x-list{
            width: 100%;
            background-color: #fff;
            overflow: hidden;
            .slideshow{
                width: 3.75rem;
                height: 1.2rem;
                .img{
                    width: 3.75rem;
                    height: 1.2rem;
                    img{
                        width: 3.75rem;
                        height: 1.2rem;
                    }
                }
            }
            .logos{
                width: 3.75rem;
                overflow: hidden;
                .goodLogo{
                    width: .91rem;
                    height: .91rem;
                    border: .005rem solid #eee;
                    float: left;
                    >img{
                        width: .8rem;
                        height: .6rem;
                    }
                }
            }
            ul{
                height: 2.1rem;
                padding: .1rem .14rem;
                background-color: #fff;
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                li{
                    width: 1.14rem;
                    height: 1.79rem;
                    padding: .1rem;
                    border: .005rem solid #ccc;
                    margin-right: .1rem;
                    text-align: left;
                    position: relative;
                    .image{
                        width: 1.14rem;
                        height: 1.14rem;
                        padding-bottom: .1rem;
                        >img{
                            width: 1.14rem;
                            height: 1.14rem;
                        }
                    }
                    .describe{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        margin-bottom: .1rem;
                        >p{
                            width: 100%;
                            height: .12rem;
                            line-height: .12rem;
                            font-size: .12rem;
                            color: #333333;
                            margin-bottom: .06rem;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        >span{
                            font-size: .09rem;
                            color: #999;
                            letter-spacing: -0.22px;
                            line-height: .09rem;
                        }
                    }
                    .price{
                        width: 100%;
                        .num{
                            font-size: .18rem;
                            color: #DD3333;
                            letter-spacing: -0.43px;
                            line-height: .18rem;
                            float: left;
                        }
                        >img{
                            width: .14rem;
                            height: .14rem;
                            float: right;
                        }

                    }
                    .corner_mark{
                        width: .3rem;
                        height: .18rem;
                        line-height: .18rem;
                        padding-left: .04rem;
                        font-size: .11rem;
                        color: #fff;
                        background: url("../../assets/corner-mark.png") no-repeat ;
                        background-size: .34rem .18rem;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                }
                :after{
                    content: "";
                    width: .1rem;
                    height: 2rem;
                    position: absolute;
                    top: 0;
                    right: -0.1rem;
                }
            }
        }
    }
    .backTop{
        width: .4rem;
        height: .4rem;
        position: fixed;
        bottom: .8rem;
        right: .2rem;
        display: none;
    }
}
</style>
